From 82e03978b89938219958032efb1448cc76baa181 Mon Sep 17 00:00:00 2001
From: Saumit <justsaumit@protonmail.com>
Date: Sat, 27 Sep 2025 02:14:26 +0530
Subject: Initial snapshot - OpenTelemetry demo 2.1.3 -f

---
 .../pages/cart/checkout/[orderId]/index.tsx        | 61 ++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/frontend/pages/cart/checkout/[orderId]/index.tsx

(limited to 'src/frontend/pages/cart/checkout/[orderId]/index.tsx')

diff --git a/src/frontend/pages/cart/checkout/[orderId]/index.tsx b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
new file mode 100644
index 0000000..740b895
--- /dev/null
+++ b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
@@ -0,0 +1,61 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import Ad from '../../../../components/Ad';
+import Button from '../../../../components/Button';
+import CheckoutItem from '../../../../components/CheckoutItem';
+import Footer from '../../../../components/Footer';
+import Layout from '../../../../components/Layout';
+import Recommendations from '../../../../components/Recommendations';
+import AdProvider from '../../../../providers/Ad.provider';
+import * as S from '../../../../styles/Checkout.styled';
+import { IProductCheckout } from '../../../../types/Cart';
+
+const Checkout: NextPage = () => {
+  const { query } = useRouter();
+  const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
+
+  return (
+    <AdProvider
+      productIds={items.map(({ item }) => item?.productId || '')}
+      contextKeys={[...new Set(items.flatMap(({ item }) => item.product.categories))]}
+    >
+      <Head>
+        <title>Otel Demo - Checkout</title>
+      </Head>
+      <Layout>
+        <S.Checkout>
+          <S.Container>
+            <S.Title>Your order is complete!</S.Title>
+            <S.Subtitle>We&apos;ve sent you a confirmation email.</S.Subtitle>
+
+            <S.ItemList>
+              {items.map(checkoutItem => (
+                <CheckoutItem
+                  key={checkoutItem.item.productId}
+                  checkoutItem={checkoutItem}
+                  address={shippingAddress}
+                />
+              ))}
+            </S.ItemList>
+
+            <S.ButtonContainer>
+              <Link href="/">
+                <Button type="submit">Continue Shopping</Button>
+              </Link>
+            </S.ButtonContainer>
+          </S.Container>
+          <Recommendations />
+        </S.Checkout>
+        <Ad />
+        <Footer />
+      </Layout>
+    </AdProvider>
+  );
+};
+
+export default Checkout;
-- 
cgit v1.2.3

